<template>
  <u-popup :show="show" round="10px" mode="center">
    <div class="phoneCode">
      <div class="title">为确保号码真实性，平台已向该手机号自 动发送一条短信验证码，请输入验证码</div>
      <div class="input_wrap">
        <input type="text" v-model="code" placeholder="请输入验证码" />
        <!-- <text class="btn">重新发送</text> -->
        <text class="btn" :class="[type == 2 ? 'disabled' : '']" @click="getCode">{{ text }}</text>
      </div>
      <div class="bottom_btn_wrap">
        <div class="item cancel" @click="cancel">取消</div>
        <div class="item submit" :class="[code ? 'true' : '']" @click="submit">确定</div>
      </div>
    </div>
  </u-popup>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "phoneCode",
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    phone: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      type: 3,
      time: 30,
      code: "",
      text: "",
      timer: null,
      isSend: false,
      isCheck: false,
      // onoff: true,
    };
  },
  computed: {
    btnText() {
      let text = "";
      switch (this.type) {
        case 1:
          text = "重新获取";
          this.text = "重新获取";
          break;
        case 2:
          this.timer = setInterval(() => {
            this.time = this.time - 1;
            text = this.time + "秒后获取";
            this.text = this.time + "秒后获取";
            if (this.time <= 0) {
              this.type = 1;
              this.time = 30;
              clearInterval(this.timer);
            }
            console.log(this.text);
          }, 1000);
          break;
        default:
          text = "获取验证码";
          this.text = "获取验证码";
      }

      return text;
    },
  },
  methods: {
    ...mapActions("user", ["setUserInfo", "setStatus"]),
    async getCode(create) {
      let _this = this;
      if (!this.isSend) {
        this.$throttle(async () => {
          if (create) {
            await _this.$http.requestSync("/phone/code/send", {
              phone: _this.phone,
              type: 2,
            });
            this.isSend = true;
            _this.type = 2;
          } else {
            if (_this.type != 2 && _this.phone) {
              // 发送验证码
              await _this.$http.requestSync("/phone/code/send", {
                phone: _this.phone,
                type: 2,
              });
              this.isSend = true;
              _this.type = 2;
            } else {
              _this.$layer.message("请检查手机号是否正确");
            }
          }
          setTimeout(() => {
            this.isSend = false;
          }, 30 * 1000);
        }, 1500);
      } else {
        this.$layer.message("验证码有效期为5分钟,如果您没有收到，请稍后再试");
      }
    },
    async submit() {
      let _this = this;
      if (this.phone && this.code) {
        let res = await this.$http.requestSync("/phone/code/ckeck", {
          phone: this.phone,
          code: this.code,
        });
        if (res.code == 200) {
          uni.login({
            provider: "weixin",
            success: async res => {
              console.log("res", res);
              let loginResult = await this.$http.requestSync("/phone/code/login", {
                phone: this.phone,
                code: this.code,
                loginCode: res.code,
              });
              try {
                if (loginResult.data.user_info) {
                  // _this.$setStoraged("userInfo", loginResult.data.user_info);
                  _this.$setStoraged("phone", loginResult.data.user_info.phone);
                  _this.$setStoraged("user_id", loginResult.data.user_info.id);
                  _this.$setStoraged("authration_token", loginResult.data.token);
                  // _this.$setStoraged("openId", loginResult.data.user_info.wechat_open_id);
                  _this.$emit("success");
                  setTimeout(() => {
                    this.setUserInfo();
                    this.setStatus();
                    clearInterval(_this.timer);
                    _this.isCheck = true;
                    _this.type = 3;
                    _this.time = 30;
                  }, 2000);
                }
              } catch (error) {
                console.log(error);
              }
            },
          });
        } else {
          this.$layer.message(res.message);
        }
        console.log(res);
      }
    },
    cancel() {
      this.$emit("cancel");
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.phoneCode {
  width: 288px;
  height: 200px;
  background: #fff;
  border-radius: 10px 10px 10px 10px;
  box-sizing: border-box;
  padding: 22px 18px;
  .title {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .input_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    background: #ffffff;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #d3d3d3;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    margin: 15px auto 20px;
    input {
      width: 100px;
    }
    .btn {
      width: 75px;
      color: #ff8822;
    }
    .disabled {
      color: #999999;
    }
  }
  .bottom_btn_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .item {
      width: 121px;
      height: 40px;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #d3d3d3;
      text-align: center;
      line-height: 40px;
      color: #999999;
    }
    .cancel {
      margin-right: 10px;
    }
    .submit {
      background: #fbbf8c;
      color: #fff;
    }
    .true {
      background: #ff8822;
    }
  }
}
</style>
